<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Graduation-project by THISISAGOODNAME</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="reveal.js/css/reveal.css">
    <link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">

    <!-- For syntax highlighting -->
    <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">

    <style>
        h2 b {
            color : #048;
        }

        h3 b {
            color : #369;
        }

        b {
            color : #63a;
        }

        strong {
            color : #c11;
        }

        #wrap {
            width : 600px;
            margin : 0 auto;
        }

        #left_col {
            float : left;
            width : 300px;
        }

        #right_col {
            float : right;
            width : 300px;
        }

        .reveal section img {
            border: none;
        }
    </style>
    
</head>
<body>

<div class="reveal">
    <div class="slides">

        <!--封面-->
        <section data-markdown>
            <script type="text/template">
                ## <b>web移植工具</b><b style="color: #f00">Emscripten</b><br><b>的研究与应用</b>

                <br>
                姓名: <b>杨彦君</b>

                学号: <b>12061040</b>

                指导教师: <b>吴壮志</b>
            </script>
        </section>

        <!--研究的目的和意义-->
        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part I</b> <b>:</b> 研究的目的和意义
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>1、</b>研究的背景

                    面对人们日益加剧的信息分享和获取的需求，硬件方面智能终端设备也在不断的推陈出新，而同样的，
                    在软件方面，移动互联网也逐渐渗透到各行各业当中，产生了
                    “<b>互联网</b><b style="color: #f00">+</b>”和
                    “<b>工业</b><b style="color: #f00">4.0</b>”的概念。
                    全世界进入了移动互联网的时代。而在移动互联网时代，大量基于C/S的传统软件变为了遗留系统。
                    这些遗留系统在向web环境进行移植过程中，需要花费巨大的人力和物力，如何有效的进行软件移植工作，
                    一直存在普遍的问题。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b> 研究的意义

                    从90年代开始,客户机/服务器(Client/Server,以下简称为C/S)结构代替了原来的
                    主机/终端(Host/Terminal)结构,并且在整个IT发展中发挥了巨大的作用。
                    但随着Interne t的不断普及和应用的迅速升级,C/S的应用感到有些力不从心。
                    而Web平台是一个调度任务集中的、以客户为中心的应用程序平台;
                    它是一个分布式、开放、适用性强、高性能、端到端的平台;它使企业利用技术获取竞争优势。
                    但是，很多企业可能并没有那么多人力物力来重新进行web版的编写，如果能有一种技术，
                    既能使用传统软件的源代码，直接生成web版的应用，或者能生成关键模块，简化web应用的开发过程，
                    对于企业的发展极为有用。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>3、</b> 研究的目的

                    为传统软件或程序类库移植到web上寻求一个切实可行的方案。
                </script>
            </section>
        </section>

        <!--国内外研究现状-->
        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part II</b> <b>:</b> 研究现状
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>1、</b> 国内研究现状

                    国内对这项技术研究的程度是比较低的，在本文调研时，众多企业中，
                    仅有北京触控科技一家公司在产品cocos2dx 2.x的版本中，
                    使用了emscripten编译器将cocos2dx的游戏编译成html5版本，
                    但是在cocos2dx 3.x的版本中，将该功能废止，推出了更适合html5开发者的cocos2d-js。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b> 国外研究现状
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.1、</b> Microsoft IE ActiveX

                    - 优点:微软的ActiveX历史悠久，可以使用大量win32 api，对于windows软件移植代码量改动最小，几乎没有性能损失；
                    - 缺点：需要安装插件，没认真过的插件会被大多数安全软件拦截，并且只支持windows系统，不能应用于移动web。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.2、</b> Sun Java JNI

                    - 优点：支持多种平台，浏览器兼容性好；
                    - 缺点：操作系统跨平台需要额外工作，为每个平台编译一个Native版本，需要目标平台安装Java且开启浏览器支持。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.3、</b> Adobe FlasCC

                    - 优点：平台兼容性比较好，而且swf文件可以脱离浏览器单独运行；
                    - 缺点：目标机需要安装flash player，移动设备现在大都不安装flash player，而且渲染器需要重写，价格高昂，编译过程非常缓慢。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.4、</b> Google Native Client

                    - 优点：与Native性能差距不大，平台兼容性好；
                    - 缺点：只支持chrome浏览器。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.5、</b> Leaning Technologies Duetto

                    - 优点：既可以将C++代码用于web应用的生成，也可以通过生成node.js脚本用于后端开发，利用javascript的JIT，性能高；
                    - 缺点：使用LGPL协议发布，商业不友好。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    #### <b>2.6、</b> Mozilla Emscripten

                    - 优点：基于llvm+clang，可以使用c++全部特性，依靠asm.js，将javascript直接解释为汇编代码运行，个别测试效率超越C++，支持openGL程序直接转变为webGL程序；
                    - 缺点：编译过程缓慢，编译是会将c++的类库一起静态编译到javascript文件中，导致javascript文件容量变大。
                </script>
            </section>
        </section>

        <!--emscripten工作流-->
        <section>
            <section>
                <a href="http://emscripten.org"><img src="images/emscripten_switch_logo.png"></a>
                <br>
                <p class="fragment">开源的 C++ to JavaScript 编译器</p>
                <br>
                <p  class="fragment" style="background-color: black; padding: 1em; box-shadow: 8px 8px 8px rgba(0,0,0,0.6)"><b style="color: #f42">C++</b>&nbsp&nbsp<b style="color: #fff">&rArr;</b>&nbsp&nbsp<b style="color: #7af">LLVM</b>&nbsp&nbsp<b style="color: #fff">&rArr;</b>&nbsp&nbsp<b style="color: #8f5">Emscripten</b>&nbsp&nbsp<b style="color: #fff">&rArr;</b>&nbsp&nbsp<b style="color: #f58">JavaScript</b></p>
            </section>

            <section>
                <h3><b>C++ 编译成 JavaScript</b></h3>
                <p>传统C++代码</p>
            <pre  class="fragment"><code>
                // hello.cpp
                #include &lt;iostream&gt;
                int main() {
                std::cout << "hello, world!" << std::endl;
                }
            </code></pre>
                <br>
                <p  class="fragment">C++代码编译和运行过程</p>
            <pre  class="fragment"><code>
                $ g++ hello.cpp -o a.out
                $ ./a.out
                hello, world!
            </code></pre>
            </section>

            <section>
                <p>使用<b>Emscripten</b>把c++编译成JavaScript :</p>
            <pre class="fragment"><code>
                $ em++ hello.cpp -o a.html
                $ firefox a.html # or any other browser
            </code></pre>
                <br>
                <p class="fragment">你会得到这样的网页:</p>
                <iframe class="fragment" src="demos/a.html" width="80%" scrolling=no></iframe>
                <br><br>
                <p class="fragment"><strong>emcc, em++</strong> 替换原有的C/C++编译器</p>
            </section>
        </section>

        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part III</b> <b>:</b> emscripten相关技术介绍
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>1、</b>clang

                    clang是一个C语言、C++、Objective-C、Objective-C++语言的轻量级编译器。
                    源代码发以BSD协议开源。兼容GCC，但又更快的编译速度和更小的内存占用，诊断功能也更加强大。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b> llvm

                    LLVM是构架编译器(compiler)的框架系统，以C++编写而成，
                    用于优化以任意程序语言编写的程序的编译时间(compile-time)、
                    链接时间(link-time)、运行时间(run-time)以及空闲时间(idle-time)，
                    对开发者保持开放，并兼容已有脚本。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>3、</b> make

                    make在20世纪70年代被发明，现在仍被作为大多数的编程项目的核心编译辅助工具在使用。
                    make的思路很简单：当你改变了源文件并想重新构建程序或者其他的输出文件时，
                    make检查时间戳看哪些改变了，并按要求重新构建这些文件，而不需要浪费时间重新构建其他文件。
                    但是在这个基本的原则之上，make提供了丰富的选项集合，让你能够操作多个目录，
                    为不同平台构建不同的版本，能够以其他的方式定制你的构建过程。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>4、</b> makefile

                    makefile是make命令的配置文件。makefile定义了一系列的规则来指定，
                    哪些文件需要先编译，哪些文件需要后编译，哪些文件需要重新编译，
                    甚至于进行更复杂的功能操作，因为 makefile就像一个Shell脚本一样，其中也可以执行操作系统的命令。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>5、</b> webIDL

                    Web IDL（Interface Definition Language，接口定义语言）该规范定义了一个OMG IDL 3.0的语法子集，
                    用来规范定义的接口。Web IDL 是一个具有多种功能的IDL 变量，便于规范Web平台中的常用脚本对象的操作。
                    其中包括了大量的扩展功能，以及捆绑了针对ECMAScript 3rd Edition 和Java的语言工具。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>6、</b> asm.js

                    asm.js是一个JavaScript的一个严格的子集，可以被用来作为一个底层的、高效的编译器目标语言。
                    asm.js提供了一个类似于C/C++虚拟机的抽象实现，包括一个可有效负载和存储的大型二进制堆、
                    整型和浮点运算、高阶函数定义、函数指针等。Mozilla还展示了一项基准测试数据，
                    结果显示，Firefox+asm.js的执行速度仅次于本地应用。
                </script>
            </section>
        </section>

        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part IV</b> <b>:</b> 研究内容与技术方案
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>1、</b>研究make和makefile

                    1. 在研究现有的c/c++工程时，看懂现有工程是最基础的，makefile是首先要攻克的难关；
                    2. make是一个命令工具，它解释Makefile 中的指令（应该说是规则）。在Makefile文件中描述了整个工程所有文件的编译顺序、编译规则。Makefile 有自己的书写格式、关键字、函数。像C 语言有自己的格式、关键字和函数一样。而且在Makefile 中可以使用系统shell所提供的任何命令来完成想要的工作。Makefile（在其它的系统上可能是另外的文件名）在绝大多数的IDE 开发环境中都在使用，已经成为一种工程的编译方法；
                    3. 会使用makefile构建自动化工作流。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>2、</b> 研究webIDL

                    1. 接口定义语言是一种胶水语言，用来将多种语言混合开发时，统一对外暴露的接口；
                    2. 多语言混合开发本来也是软件开发的一个难点，而且也是自己开发时较少涉及的；
                    3. 开发时的API设计也需要考虑,以后编写新的C++工程时可以尽可能适合移植。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>3、</b> 研究emscripten 特有的 API

                    1. emscripten.h : 用来像在C++中嵌入C代码一样的嵌入javascript代码；
                    2. html5.h : 用来操作DOM，调用浏览器功能，与网页中元素进行互操作；
                    3. preamble.js : 在网页中调用，之后可以调用C++代码中的方法；
                    4. val.h(开发不完全) : 将javascript代码变成C++代码；
                    5. bind.h : 调整函数接口；
                    6. trace.h : 用来调试；
                    7. 什么代码需要重写，什么代码不需要重写，工程文件修改多少，都是研究的难点。
                </script>
            </section>

            <section data-markdown>
                <script type="text/template">
                    ### <b>4、</b> 设计一个传统软件向web移植的工作流

                    1. 通过几个特征性的框架和类库的移植研究，提取通用的移植过程；
                    2. 将过程抽象成一个通用的工作流。
                </script>
            </section>
            
            <section data-markdown>
                <script type="text/template">
                    ### <b>5、</b> 移植的应用实例

                    1. Meshlab : 开源网格处理软件；
                    2. Bullet Physics Engine : 开源物理引擎； 
                    3. luaVM : lua语言的虚拟机(运行环境)；
                    4. SQLite : 开源数据库。
                </script>
            </section>
        </section>

        <section>
            <h3>但是Emscripten只是<b>能</b>把c++编译成JavaScript :</h3>
            <br>
            <p class="fragment">我们只证明了C++有向javascript移植的能力</p>
            <p class="fragment">并不足以证明,传统软件可以轻易的完成向web的移植</p>
            <p class="fragment">我的研究课题,就是给<strong>传统软件向web移植</strong>寻找一个可行的通用的方法</p>
        </section>

        <section data-markdown>
            <script type="text/template">
                ## <b>Part V</b> <b>:</b> 进度计划安排

                
                | 时间 | 研究计划 |
                |:--------:|:--------|
                |2015-12 ~ 2016-01|选题，准备开题答辩，调研相关技术|
                |2016-01 ~ 2016-03|make工具使用的学习，学会编写makefile,学习web IDL语言以及使用|
                |2016-03 ~ 2016-04|自行编写一个十个文件左右的项目并尝试移植，中期答辩|
                |2016-05 | 完成Meshlab，bullet，luaVM，SQLite的移植，并测试|
                |2016-06 | 完成毕业设计和毕业论文，进行最终答辩|

            </script>
        </section>

        <section>
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part VI</b> <b>:</b> 主要参考文献

                    - [1]张帆．从Objective-C到Swift的软件移植研究与实现[D]．北京:中国科学院大学，2015．
                    - [2] Gordon R, Essential J N I. Java Native Interface[J]. Prentince Hall PTR, 1998.
                    - [3] Metz C. Google Native Client: The web of the future—or the past?[J]. The Register, http://www. theregister. co. uk/2011/09/12/google—native—client—from—all—sides/print. html, 13.
                    - [4]Zakai A. Emscripten: an LLVM-to-JavaScript compiler[C]//Proceedings of the ACM international conference companion on Object oriented programming systems languages and applications companion. ACM, 2011: 301-312.

                </script>
            </section>
            
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part VI</b> <b>:</b> 主要参考文献(续1)

                    - [5] Lattner C, Adve V. LLVM: A compilation framework for lifelong program analysis & transformation[C]//Code Generation and Optimization, 2004. CGO 2004. International Symposium on. IEEE, 2004: 75-86.
                    - [6] Herman D, Wagner L, Zakai A. asm. js: Working Draft 17 March 2013[J]. Available online at asmjs. org/spec/latest. Accessed June, 2013.
                    - [7] WebGL-OpenGL E S. 2.0 for the Web[J]. Khronos Group, 2014.
                    - [8] Lattner C. LLVM and Clang: Next generation compiler technology[C]//The BSD Conference. 2008: 1-2.

                </script>
            </section>
            
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part VI</b> <b>:</b> 主要参考文献(续2)

                    - [9] Clang C. language family frontend for LLVM[J]. 2005.
                    - [10] Stallman R M, McGrath R, Smith P D. GNU Make: A program for directing recompilation, for version 3.81[M]. Free Software Foundation, 2004.
                    - [11] Jameson K W. Collection makefile generator: U.S. Patent 7,003,759[P]. 2006-2-21.
                    - [12] McCormack C. Web IDL[J]. W3C Candidate Recommendation CR-WebIDL-20120419, 2012.
                    
                </script>
            </section>
            
            <section data-markdown>
                <script type="text/template">
                    ## <b>Part VI</b> <b>:</b> 主要参考文献(续3)

                    - [13] Cignoni P, Corsini M, Ranzuglia G. Meshlab: an open-source 3d mesh processing system[J]. Ercim news, 2008, 73: 45-46.
                    - [14] Yermolovich A, Wimmer C, Franz M. Optimization of dynamic languages using hierarchical layering of virtual machines[C]//ACM Sigplan Notices. ACM, 2009, 44(12): 79-88.
                    - [15] Junyan L, Shiguo X, Yijie L. Application research of embedded database SQLite[C]//Information Technology and Applications, 2009. IFITA'09. International Forum on. IEEE, 2009, 2: 539-543.
                    - [16] Coumans E. Bullet physics engine[J]. Open Source Software: http://bulletphysics. org, 2010, 1.

                </script>
            </section>
        </section>
        

        <section>
            <h2><b style="color: #f00">谢谢大家</b></h2>
            <br>
            <br>
            <p class="fragment">欢迎提问</p>
        </section>
    </div>
</div>


<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>

<script>
    // Full list of configuration options available at:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: 'sky',
        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
            {
                src: 'lib/js/classList.js', condition: function () {
                return !document.body.classList;
            }
            },
            {
                src: 'plugin/markdown/marked.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: 'plugin/markdown/markdown.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: 'plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            },
            {src: 'plugin/zoom-js/zoom.js', async: true},
            {src: 'plugin/notes/notes.js', async: true}
        ]
    });
</script>

</body>
</html>
